<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>当当网</title>
</head>

<link rel="stylesheet" href="css/dangdang1.css">

<body>
    <!-- 2.使用html+css完成效果图（素材见课件） -->
    <div id="head" style="margin-left:5%;margin-right:5%">
        <img src="img/logo.jpg">
       <div class="head_right">
           <div class="head_count">
               <img src="img/icon_count.png">
           </div>
           <ul>
               <li><a href="">尾品会</a></li>
               <li><a href="">当当优品</a></li>
               <li><a href="">数字管</a></li>
               <li><a href="">都看阅器</a></li>
           </ul>
       </div>
    </div>

    <div id="navigator" style="margin-left:5%;margin-right:5%">
            <ul>
                <li><a href="">首页</a></li>  
                <li><a href="">图书</a></li>  
                <li><a href="">音像</a></li>  
                <li><a href="">童装</a></li>  
                <li><a href="">服装</a></li>  
                <li><a href="">鞋靴</a></li>  
                <li><a href="">运动</a></li>  
                <li><a href="">箱包</a></li>  
                <li><a href="">美妆</a></li>  
                <li><a href="">珠宝</a></li>  
                <li><a href="">家居</a></li>  
                <li><a href="">食品</a></li>  
                <li><a href="">酒</a></li>  
                <li><a href="">手机</a></li>  
                <li><a href="">数码</a></li>  
                <li><a href="">电脑</a></li>  
                <li><a href="">家电</a></li> 
            </ul>
    </div>

    <div id="banner" style="margin-left:5%;margin-right:5%">
        <img src="img/banner.png">
    </div>

    <div id="content" style="margin-left:5%;margin-right:5%">
        <div class="content_bg">
             <img src="img/bg_bang.gif">
        </div>
        <div class="books">
             <div id="book1">
                <div class="book1No1">
                    <img src="img/bookNo1.gif">
                </div>
                <div class="book-01">
                    <img src="img/book-01.jpg">
                </div>
                <div class="book1_intro">
                    <p class="title">偷影子的人 </p>
                    <p class="author">作者：[法]马克.李维(Marc Levy) 著 </p>
                    <p class="public">出版社：湖南文艺出版社</p>
                    <p class="price"><span>当当价：</span> <span style="color: red">￥17.90</span></p>  
                    <p class="intro">不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能"偷别人的影子"
                    </p>
                </div>
             </div>
        </div>

        <div id="books_right">
            <div id="book2">
                <div class="book2_No">
                    <img src="img/bookNo2.gif">
                </div>
                <div class="book-02">
                    <img src="img/book-02.jpg">
                </div>
                <div class="book2_intro">
                    <p class="title">看见（央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘）</p>
                    <p class="author">作者: 柴静 著 </p>
                    <p class="public">出版社：广西师范大学出版社</p>
                    <p class="price"> <span style="color: red">￥29.40</span>
                        <span style="color:seagreen ">7.4折 </span></p> 
                </div>
            </div>

            <div id="book3">
                  <div class="book3_No">
                        <img src="img/bookNo3.gif">
                  </div>
                  <div class="book-03">
                        <img src="img/book-03.jpg">
                  </div>
                  <div class="book3_intro">
                        <p class="title">改变孩子先改变自己</p>
                        <p class="author">作者: 贾容韬 贾毅 著 </p>
                        <p class="public">出版社：作家出版社</p>
                        <p class="price"> <span style="color: red">￥22.20</span>
                            <span style="color:seagreen ">7.4折 </span></p>  
                  </div>
            </div>
        </div>
   </div>

   <div id="foot" style="margin-left:5%; margin-right:5%">
       <div class="copyright">
           <p>Copyright(C) 当当网 2004-2017, All Rights Reserved</p>
       </div>
       <div class="validate">
           <img src="img/validate.gif">
       </div>
       <div>
           <p>京ICP证041189号出版物经营许可证 新出发京批字第直0673号</p>
       </div>
   </div>
</body>
</html>